import { DatePickerDemos } from "@/lib/@docs/demos/src";
import { Layout } from "@/layout";
import { MDX_DATA } from "@/mdx";

export default Layout(MDX_DATA.DatePicker);

## Usage

<Demo data={DatePickerDemos.usage} />

## Allow deselect

Set `allowDeselect` to allow user to deselect current selected date by clicking on it.
`allowDeselect` is disregarded when `type` prop is `range` or `multiple`. When date is
deselected `onChange` is called with `null`.

<Demo data={DatePickerDemos.deselect} />

## Multiple dates

Set `type="multiple"` to allow user to pick multiple dates:

<Demo data={DatePickerDemos.multiple} />

## Dates range

Set `type="range"` to allow user to pick dates range:

<Demo data={DatePickerDemos.range} />

## Single date in range

By default, it is not allowed to select single date as range – when user clicks the same date second time it is deselected.
To change this behavior set `allowSingleDateInRange` prop. `allowSingleDateInRange` is ignored when
`type` prop is not `range`.

<Demo data={DatePickerDemos.singleRange} />

## Default date

Use `defaultDate` prop to set date value that will be used to determine which year should be displayed initially.
For example to display `2015 February` month set `defaultDate={new Date(2015, 1)}`. If value is not specified,
then `defaultDate` will use `new Date()`. Day, minutes and seconds are ignored in provided date object, only year and month data is used –
you can specify any date value.

Note that if you set `date` prop, then `defaultDate` value will be ignored.

<Demo data={DatePickerDemos.defaultDate} />

## Controlled date

Set `date`, and `onDateChange` props to make currently displayed month, year and decade controlled.
By doing so, you can customize date picking experience, for example, when user selects first date in range,
you can add one month to the current date value:

<Demo data={DatePickerDemos.controlledDate} />

## Default level

Set `defaultLevel` prop to configure initial level that will be displayed:

<Demo data={DatePickerDemos.defaultLevel} />

## Hide outside dates

Set `hideOutsideDates` prop to remove all dates that do not belong to the current month:

<Demo data={DatePickerDemos.hideOutsideDates} />

## First day of week

Set `firstDayOfWeek` prop to configure first day of week. The prop accepts number from 0 to 6,
where 0 is Sunday and 6 is Saturday. Default value is 1 – Monday. You can also configure this option
for all components with [DatesProvider](/dates/dates-provider/).

<Demo data={DatePickerDemos.firstDayOfWeek} />

## Hide weekdays

Set `hideWeekdays` prop to hide weekdays names:

<Demo data={DatePickerDemos.hideWeekdays} />

## Weekend days

Use `weekendDays` prop to configure weekend days. The prop accepts an array of numbers from 0 to 6,
where 0 is Sunday and 6 is Saturday. Default value is `[0, 6]` – Saturday and Sunday. You can also configure this option
for all components with [DatesProvider](/dates/dates-provider/).

<Demo data={DatePickerDemos.weekendDays} />

## Render day function

You can customize day rendering with `renderDay` prop. For example, it can be used to add
[Indicator](/core/indicator/) to certain days.

<Demo data={DatePickerDemos.renderDay} />

## Min and max date

Set `minDate` and `maxDate` props to define min and max dates. If previous/next page is not available
then corresponding control will be disabled.

<Demo data={DatePickerDemos.minMax} />

## Add props to year and month control

You can add props to year, month and day controls with `getYearControlProps`, `getMonthControlProps` and `getDayProps` functions. All functions accept date as single argument,
props returned from the function will be added to year/month/day control. For example, it can be used to disable specific
control or add styles:

<Demo data={DatePickerDemos.controlProps} />

## Exclude dates

To disable specific dates use `excludeDate` prop.
It accepts function that takes date as argument and returns boolean value – if `true` is returned, date will be disabled.
Example of disabling all dates that are not Fridays:

<Demo data={DatePickerDemos.excludeDate} />

## Number of columns

Set `numberOfColumns` prop to define number of pickers that will be rendered side by side:

<Demo data={DatePickerDemos.numberOfColumns} />

## Max level

<Demo data={DatePickerDemos.maxLevel} />

## Size

<Demo data={DatePickerDemos.sizeConfigurator} />

## Change year and months controls format

Use `yearsListFormat` and `monthsListFormat` props to change [dayjs format](https://day.js.org/docs/en/display/format) of year/month controls:

<Demo data={DatePickerDemos.listFormat} />

## Change label format

Use `decadeLabelFormat`, `yearLabelFormat` and `monthLabelFormat` props to change [dayjs format](https://day.js.org/docs/en/display/format) of decade/year label:

<Demo data={DatePickerDemos.labelFormat} />

## Localization

Usually it is better to specify `@mantine/dates` package locale in [DatesProvider](/dates/dates-provider/),
but you can also override locale per component:

<Demo data={DatePickerDemos.locale} />

## Accessibility

### Aria labels

Set `ariaLabels` prop to specify `aria-label` attributes for next/previous controls:

```tsx
import { DatePicker } from "@mantine/dates";

function Demo() {
  return (
    <DatePicker
      ariaLabels={{
        nextDecade: "Next decade",
        previousDecade: "Previous decade",
        nextYear: "Next year",
        previousYear: "Previous year",
        nextMonth: "Next month",
        previousMonth: "Previous month",
        yearLevelControl: "Change to decade view",
        monthLevelControl: "Change to year view",
      }}
    />
  );
}
```

### Year/month control aria-label

Use `getYearControlProps`/`getMonthControlProps`/`getDayProps` to customize `aria-label` attribute:

```tsx
import { DatePicker } from "@mantine/dates";

function Demo() {
  return (
    <DatePicker
      getDayProps={(date) => ({
        "aria-label": `Select date ${
          date.getMonth() + 1
        }/${date.getDate()}/${date.getFullYear()}`,
      })}
      getYearControlProps={(date) => ({
        "aria-label": `Select year ${date.getFullYear()}`,
      })}
      getMonthControlProps={(date) => ({
        "aria-label": `Select month ${date.getFullYear()}/${date.getMonth()}`,
      })}
    />
  );
}
```

### Keyboard interactions

Note that the following events will only trigger if focus is on date control.

<KeyboardEventsTable
  data={[
    {
      key: "ArrowRight",
      description: "Focuses next non-disabled date",
    },
    {
      key: "ArrowLeft",
      description: "Focuses previous non-disabled date",
    },
    {
      key: "ArrowDown",
      description: "Focuses next non-disabled date in the same column",
    },
    {
      key: "ArrowUp",
      description: "Focuses previous non-disabled date in the same column",
    },
  ]}
/>
